<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->


<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="lib/simpleRequire.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
        <script src="lib/testHelper.js"></script>
        <script src="lib/draggable.js"></script>
        <!-- <script src="ut/lib/canteen.js"></script> -->
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
        </style>

        <div id="main_gap_percent_break_1"></div>
        <div id="main_gap_percent_break_2"></div>

        <div id="main_xNumber_yNumber_axis"></div>
        <div id="main_xTime_yNumber_axis"></div>
        <div id="main_xCategory_yNumber_axis"></div>
        <div id="main_xNumber_yCategory_axis"></div>

        <div id="main_break_line_style"></div>



        <script>
        require([
            'echarts'
        ], function (echarts) {
            var option;
            var XAXIS_NAME_GAP = -190;
            var caseList = [{
                xAxisName: 'Brk area should be 50% of yAxis',
                breaks: [{start: 0, end: 300, gap: '50%'}],
            }, {
                xAxisName: 'Brk area should be 50% of yAxis',
                breaks: [{start: 10000, end: 10300, gap: '50%'}],
            }, {
                xAxisName: 'Brk area should be 80% of yAxis',
                breaks: [{start: 0, end: 300, gap: '80%'}],
            }, {
                xAxisName: 'Brk gap should be 0, as a polyline',
                breaks: [{start: 10000, end: 10300, gap: '0%'}],
            }, {
                xAxisName: 'Brk areas should be 30%, 20%',
                breaks: [
                    {start: 18000, end: 19000, gap: '30%'},
                    {start: 19000, end: 20000, gap: '20%'},
                ],
            }, {
                xAxisName: 'Brk areas should be 40%, 10000, 10%',
                breaks: [
                    {start: 17000, end: 18000, gap: '40%'},
                    {start: 18000, end: 19000, gap: 10000},
                    {start: 19000, end: 20000, gap: '10%'},
                ],
            }];

            option = {
                tooltip: {
                },
                xAxis: (function createXAxis() {
                    var xAxisOptionList = [];
                    for (var idx = 0; idx < caseList.length; idx++) {
                        xAxisOptionList.push({
                            gridIndex: idx,
                            data: ['a', 'b'],
                            nameGap: XAXIS_NAME_GAP,
                            nameLocation: 'center',
                            name: caseList[idx].xAxisName,
                        });
                    }
                    return xAxisOptionList;
                })(),
                yAxis: (function createYAxis() {
                    var yAxisOptionList = [];
                    for (var idx = 0; idx < caseList.length; idx++) {
                        yAxisOptionList.push({
                            gridIndex: idx,
                            axisTick: {show: true},
                            breaks: caseList[idx].breaks,
                        });
                    }
                    return yAxisOptionList;
                })(),
                grid: (function createGridOption() {
                    var gridOptionList = []
                    var gridColMax = 3;
                    var gridWidth = '20%';
                    var gridHGap = '8%';
                    var gridTopBase = 90;
                    var gridLineHeight = 240;
                    var gridLeftBase = '8%';
                    var gridHeight = 150;
                    var gridMaxInOneLine = 3;

                    var currGridLineNumber = 0;
                    var currGridLeft = gridLeftBase;

                    for (var idx = 0; idx < caseList.length; idx++) {
                        gridOptionList.push({
                            left: currGridLeft,
                            top: gridTopBase + gridLineHeight * currGridLineNumber,
                            width: gridWidth,
                            height: gridHeight,
                            show: true,
                            backgroundColor: 'rgba(0,0,0,0.1)'
                        });
                        currGridLeft = (parseFloat(currGridLeft) + parseFloat(gridHGap) + parseFloat(gridWidth)) + '%';
                        if ((idx + 1) % gridMaxInOneLine === 0) {
                            currGridLineNumber++;
                            currGridLeft = gridLeftBase;
                        }
                    }
                    return gridOptionList;
                })(),
                legend: {
                    data: ['s2']
                },
                tooltip: {
                    trigger: 'axis'
                },
                series: (function makeSeries() {
                    function create() {
                        return {
                            type: 'bar',
                            name: 's2',
                            data: [300, 20000],
                            label: { show: true, position: 'top' }
                        };
                    }
                    var seriesOptionList = [];
                    for (var idx = 0; idx < caseList.length; idx++) {
                        var seriesOption = create();
                        seriesOption.xAxisIndex = idx;
                        seriesOption.yAxisIndex = idx;
                        seriesOptionList.push(seriesOption);
                    }
                    return seriesOptionList;
                })()
            };

            var chart = testHelper.create(echarts, 'main_gap_percent_break_1', {
                title: [
                    'break gap is percent',
                ],
                option: option,
                height: 550
            });
        });
        </script>



        <script>
        require([
            'echarts'
        ], function (echarts) {
            var option;
            var XAXIS_NAME_GAP = -190;
            var caseList = [{
                xAxisName: [
                    'Brk area should be 50% of yAxis',
                    'dataZoom hide break smoothly'
                ].join('\n'),
                breaks: [{start: 10000, end: 10300, gap: '50%'}],
                dataZoomStartValue: 5400,
                dataZoomEndValue: 12800,
            }, {
                xAxisName: [
                    'Brk area should be 10%, 40% of yAxis',
                    'dataZoom gap width should be consistent',
                ].join('\n'),
                breaks: [
                    {start: 4234, end: 7000, gap: '10%'},
                    {start: 11234, end: 13000, gap: '40%'},
                ],
                dataZoomStart: 0,
                dataZoomEnd: 50,
            }, {
                xAxisName: [
                    'Brk area should be 10%, 5000, 10% of yAxis',
                    'dataZoom percent gap width should be consistent',
                ].join('\n'),
                breaks: [
                    {start: 4234, end: 7000, gap: '10%'},
                    {start: 8234, end: 10000, gap: 10000},
                    {start: 11234, end: 13000, gap: '10%'},
                ],
                dataZoomStart: 0,
                dataZoomEnd: 50,
            }];

            var gridColMax = 3;
            var gridWidth = '30%';
            var gridHGap = '18%';
            var gridTopBase = 90;
            var gridLineHeight = 240;
            var gridLeftBase = '8%';
            var gridHeight = 150;
            var gridMaxInOneLine = 2;

            option = {
                tooltip: {
                },
                xAxis: (function createXAxis() {
                    var xAxisOptionList = [];
                    for (var idx = 0; idx < caseList.length; idx++) {
                        xAxisOptionList.push({
                            gridIndex: idx,
                            data: ['a', 'b', 'c'],
                            nameGap: XAXIS_NAME_GAP,
                            nameLocation: 'center',
                            name: caseList[idx].xAxisName,
                        });
                    }
                    return xAxisOptionList;
                })(),
                yAxis: (function createYAxis() {
                    var yAxisOptionList = [];
                    for (var idx = 0; idx < caseList.length; idx++) {
                        yAxisOptionList.push({
                            gridIndex: idx,
                            axisTick: {show: true},
                            breaks: caseList[idx].breaks,
                            breakArea: {
                                zigzagAmplitude: 2,
                                itemStyle: {color: 'red', opacity: 0.1}
                            }
                        });
                    }
                    return yAxisOptionList;
                })(),
                grid: (function createGridOption() {
                    var gridOptionList = []
                    var currGridLineNumber = 0;
                    var currGridLeft = gridLeftBase;

                    for (var idx = 0; idx < caseList.length; idx++) {
                        gridOptionList.push({
                            left: currGridLeft,
                            top: gridTopBase + gridLineHeight * currGridLineNumber,
                            width: gridWidth,
                            height: gridHeight,
                            show: true,
                            backgroundColor: 'rgba(0,0,0,0.1)'
                        });
                        currGridLeft = (
                            parseFloat(currGridLeft) + parseFloat(gridHGap) + parseFloat(gridWidth)
                        ) + '%';
                        if ((idx + 1) % gridMaxInOneLine === 0) {
                            currGridLineNumber++;
                            currGridLeft = gridLeftBase;
                        }
                    }
                    return gridOptionList;
                })(),
                dataZoom: (function createDataZoom() {
                    var dataZoomOptionList = [];
                    var currGridLineNumber = 0;
                    var currGridLeft = gridLeftBase;

                    for (var idx = 0; idx < caseList.length; idx++) {
                        dataZoomOptionList.push({
                            type: 'slider',
                            yAxisIndex: idx,
                            startValue: caseList[idx].dataZoomStartValue,
                            endValue: caseList[idx].dataZoomEndValue,
                            left: (parseFloat(currGridLeft) + parseFloat(gridWidth)) + '%'
                        });
                        currGridLeft = (
                            parseFloat(currGridLeft) + parseFloat(gridHGap) + parseFloat(gridWidth)
                        ) + '%';
                        if ((idx + 1) % gridMaxInOneLine === 0) {
                            currGridLineNumber++;
                            currGridLeft = gridLeftBase;
                        }
                    }
                    return dataZoomOptionList;
                })(),
                legend: {
                    data: ['s1', 's2']
                },
                tooltip: {
                    trigger: 'axis'
                },
                series: (function makeSeries() {
                    var seriesOptionList = [];
                    for (var idx = 0; idx < caseList.length; idx++) {
                        var seriesOpts = [{
                            type: 'bar',
                            name: 's1',
                            data: [300, 12000, 40000],
                            label: { show: true, position: 'top' }
                        }, {
                            type: 'scatter',
                            name: 's2',
                            data: [7000, 15000, 9000],
                            label: { show: true, position: 'top' }
                        }];
                        for (var jdx = 0; jdx < seriesOpts.length; jdx++) {
                            seriesOpts[jdx].xAxisIndex = idx;
                            seriesOpts[jdx].yAxisIndex = idx;
                            seriesOptionList.push(seriesOpts[jdx]);
                        }
                    }
                    return seriesOptionList;
                })()
            };

            var chart = testHelper.create(echarts, 'main_gap_percent_break_2', {
                title: [
                    'break gap is percent',
                    'Use legend to hide s1, break height should be consistent'
                ],
                option: option,
                height: 900
            });
        });
        </script>







        <script>
        require([
            'echarts'
        ], function (echarts) {

            var _gridShow = [true, true, true];
            // var _gridShow = [true, false, false];

            function xMakeBreaks() {
                return [{
                    end: 34209000 + BASE_DATE,
                    start: 35801000 + BASE_DATE,
                    gap: 0
                }, {
                    end: 3123456 + BASE_DATE,
                    start: 3023456 + BASE_DATE,
                    // gap: 50000000
                    gap: '5%'
                }];
            }
            function yMakeBreaks() {
                return [{
                    end: 1800,
                    start: 1500,
                    gap: 0
                }, {
                    end: 900,
                    start: 600,
                    gap: '5%'
                }];
            }

            var BASE_DATE = 1740824305347;
            var X_LABEL_ROTATE = 50;
            var Y_LABEL_ROTATE = 0;
            var XAXIS_NAME_GAP = -190;

            var FORMATTER_ONE_LINE = (value, idx, params) => {
                var dateStr = echarts.time.format(value, '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss}');
                if (params && params.break) {
                    return `${dateStr} (${params.break.type})`;
                }
                return `${dateStr}`;
            };

            var option = {
                tooltip: {
                },
                yAxis: (function () {
                    var list = [];
                    var idx = 0;
                    var gridIndex = 0;
                    _gridShow[idx++] && list.push({
                        gridIndex: gridIndex++,
                        axisLine: {
                            show: true,
                        },
                        axisLabel: {
                            rotate: Y_LABEL_ROTATE,
                        },
                        breaks: yMakeBreaks(),
                        breakArea: {
                            itemStyle: {
                                borderType: 'solid',
                            }
                        },
                    });
                    _gridShow[idx++] && list.push({
                        gridIndex: gridIndex++,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: 'blue'
                            }
                        },
                        axisTick: {
                            show: true,
                        },
                        axisLabel: {
                            rotate: Y_LABEL_ROTATE,
                        },
                        breaks: yMakeBreaks(),
                    });
                    _gridShow[idx++] && list.push({
                        gridIndex: gridIndex++,
                        axisLine: {
                            show: true,
                            breakLine: false,
                        },
                        axisLabel: {
                            rotate: Y_LABEL_ROTATE,
                        },
                        breaks: yMakeBreaks(),
                    });
                    return list;
                })(),
                xAxis: (function () {
                    var list = [];
                    var idx = 0;
                    var gridIndex = 0;
                    _gridShow[idx++] && list.push({
                        id: 'x0',
                        type: 'time',
                        gridIndex: gridIndex++,
                        name: [
                            'axisTick.show: false',
                            'axis line should break'
                        ].join('\n'),
                        nameLocation: 'center',
                        nameGap: XAXIS_NAME_GAP,
                        breaks: xMakeBreaks(),
                        splitLine: {
                            show: true,
                        },
                        axisTick: {
                            show: false,
                        },
                        breakArea: {
                            zigzagAmplitude: 2,
                        },
                        axisLabel: {
                            // hideOverlap: true,
                            showMaxLabel: true,
                            showMinLabel: true,
                            rotate: X_LABEL_ROTATE
                        }
                    });
                    _gridShow[idx++] && list.push({
                        id: 'x1',
                        type: 'time',
                        gridIndex: gridIndex++,
                        name: [
                            'axisTick: show true',
                            'axis line should break, colored. Break tick should display'
                        ].join('\n'),
                        nameLocation: 'center',
                        nameGap: XAXIS_NAME_GAP,
                        splitLine: {
                            show: true,
                        },
                        axisTick: {
                            show: true,
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'red'
                            }
                        },
                        breaks: xMakeBreaks(),
                        breakArea: {
                            zigzagAmplitude: 2,
                            itemStyle: {
                                borderType: 'solid',
                            }
                        },
                        axisLabel: {
                            // hideOverlap: true,
                            showMaxLabel: true,
                            showMinLabel: true,
                            rotate: X_LABEL_ROTATE,
                            formatter: FORMATTER_ONE_LINE
                        }
                    });
                    _gridShow[idx++] && list.push({
                        id: 'x2',
                        type: 'time',
                        gridIndex: gridIndex++,
                        name: 'axisLine.breakLine: false',
                        nameLocation: 'center',
                        nameGap: XAXIS_NAME_GAP,
                        splitLine: {
                            show: true,
                        },
                        axisTick: {
                            show: true,
                        },
                        axisLabel: {
                            // hideOverlap: true,
                            showMaxLabel: true,
                            showMinLabel: true,
                            rotate: X_LABEL_ROTATE,
                        },
                        breaks: xMakeBreaks(),
                        breakLine: {
                            show: false,
                        }
                    });
                    return list;
                })(),
                dataZoom: (function () {
                    var indexList = [];
                    var idx = 0;
                    _gridShow.forEach(function (show) { indexList.push(idx++); });
                    return [{
                        type: 'slider',
                        xAxisIndex: indexList.slice(),
                    }, {
                        type: 'slider',
                        right: 20,
                        yAxisIndex: indexList.slice(),
                    }];
                })(),
                legend: {
                    data: ['s2', 's3', 's4'],
                    selected: {
                        // 's2': false,
                        's4': false,
                    },
                },
                grid: (function () {
                    var list = [];
                    var idx = 0;
                    _gridShow[idx++] && list.push({
                        top: 50,
                        left: 50,
                        width: '35%',
                        height: '25%',
                        borderWidth: 0,
                    });
                    _gridShow[idx++] && list.push({
                        top: 50,
                        right: 70,
                        width: '35%',
                        height: '25%',
                        borderWidth: 0,
                    });
                    _gridShow[idx++] && list.push({
                        left: 50,
                        width: '35%',
                        height: '25%',
                        bottom: 120,
                        borderWidth: 0,
                    });
                    return list;
                })(),
                tooltip: {
                    trigger: 'axis'
                },
                series: (function makeSeries() {
                    const createSeries = () => [{
                        type: 'scatter',
                        name: 's2',
                        data: [
                            [-80002000 + BASE_DATE, 1300],
                            [100003000 + BASE_DATE, 2000]
                        ],
                        label: {
                            show: true
                        }
                    }, {
                        type: 'scatter',
                        name: 's3',
                        data: [
                            [2004000 + BASE_DATE, 1300],
                            [5005000 + BASE_DATE, 2000]
                        ],
                        label: {
                            show: true
                        }
                    }, {
                        type: 'scatter',
                        name: 's4',
                        data: [
                            [-189106000 + BASE_DATE, 1300],
                            [312307000 + BASE_DATE, 2000]
                        ],
                        label: {
                            show: true
                        }
                    }];
                    const list = [];
                    var gridIndex = 0;
                    _gridShow.forEach((show) => {
                        show && (createSeries().forEach(seriesOption => {
                            seriesOption.xAxisIndex = gridIndex;
                            seriesOption.yAxisIndex = gridIndex;
                            list.push(seriesOption);
                        }), gridIndex++);
                    })
                    return list;
                })()
            };

            var chart = testHelper.create(echarts, 'main_break_line_style', {
                title: [
                    'axis break line style.',
                    'axis break tick animation should be smooth.',
                ],
                option: option,
                height: 600,
                buttons: [{
                    text: 'hideOverlap:',
                    type: 'select',
                    values: [true, false],
                    onchange: function () {
                        var value = this.value;
                        var list = [];
                        _gridShow.forEach(show => {
                            show && list.push({ axisLabel: {hideOverlap: value} });
                        });
                        chart.setOption({
                            xAxis: list
                        });
                    }
                }]
            });
        });
        </script>






        <script>
        require([
            'echarts'
        ], function (echarts) {
            var GRID_SIZE = {
                left: 80,
                right: 80,
                top: 50,
                bottom: 110,
            };

            var option;
            function makeXBreaks(isExpanded) {
                return [{
                    start: 200,
                    end: 230000,
                    gap: 1000,
                    isExpanded: isExpanded,
                }];
            }
            function makeYBreaks(isExpanded) {
                return [{
                    start: 200,
                    end: 280000,
                    gap: 100,
                    isExpanded: isExpanded,
                }];
            }

            option = {
                tooltip: {
                },
                yAxis: {
                    axisLine: {
                        show: true,
                        onZero: false,
                    },
                    axisTick: {
                        show: true
                    },
                    axisLabel: {
                        hideOverlap: false,
                    },
                    breaks: makeYBreaks(false),
                    breakArea: {
                        itemStyle: {borderType: 'solid'}
                    },
                },
                xAxis: {
                    triggerEvent: true,
                    axisTick: {
                        show: true
                    },
                    axisLabel: {
                        hideOverlap: false,
                        show: true,
                    },
                    axisLine: {
                        show: true,
                        onZero: false,
                    },
                    breaks: makeXBreaks(false),
                    breakArea: {
                        itemStyle: {borderType: 'solid'}
                    },
                },
                grid: {
                    left: GRID_SIZE.left,
                    right: GRID_SIZE.right,
                    top: GRID_SIZE.top,
                    bottom: GRID_SIZE.bottom,
                },
                dataZoom: [{
                    type: 'slider',
                    xAxisIndex: 0,
                    bottom: 20,
                }, {
                    type: 'inside',
                    xAxisIndex: 0,
                }, {
                    type: 'slider',
                    yAxisIndex: 0,
                    right: 20,
                }],
                legend: {
                    data: ['s2']
                },
                tooltip: {
                    trigger: 'axis'
                },
                series: [{
                    type: 'scatter',
                    name: 's2',
                    symbolSize: 20,
                    data: [
                        [-1500, 10000],
                        [-200000, 290000],
                        [8008, 20000],
                        [-30000, -50000],
                        [100200, 3000],
                        [700435, 300000],
                        [700800, 4000]
                    ],
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            fontSize: 10,
                        },
                    },
                }]
            };

            function brkStr(breakOptionList, idx) {
                var txt = [];
                breakOptionList.forEach(function (item) {
                    txt.push(item.start + '~' + item.end);
                });
                return txt.length ? txt.join(',') : 'none';
            }

            var chart = testHelper.create(echarts, 'main_xNumber_yNumber_axis', {
                title: [
                    '- xAxis with breaks: ' + brkStr(makeXBreaks()),
                    '- yAxis with breaks: ' + brkStr(makeYBreaks()),
                    '- break pair should be centered to break ticks when **labels length differ significantly**.',
                    '- break labels should neight overlap nor join (**test different gap size**)',
                    '- Negative breaks should work correctly.',
                    '- **rotate Y labels to 90**, should be correct.',
                    '- rotate X labels, should be correct.',
                    '- **Inverse axis**, should be correct.',
                    '- Click the legend to remove all series, expect only axis drawn.'
                ],
                option: option,
                width: 700,
                height: 400,
                draggable: true,
                inputsHeight: 119.5,
                inputs: [{
                    text: 'reset X breaks',
                    onclick: function () {
                        chart.dispatchAction({
                            type: 'collapseAxisBreak',
                            xAxisIndex: 0,
                            breaks: makeXBreaks(false)
                        });
                    }
                }, {
                    text: 'reset Y breaks',
                    onclick: function () {
                        chart.dispatchAction({
                            type: 'collapseAxisBreak',
                            yAxisIndex: 0,
                            breaks: makeYBreaks(false)
                        });
                    }
                }, {
                    text: 'x inverse:',
                    type: 'select',
                    values: [false, true],
                    onchange: function () {
                        chart.setOption({xAxis: {inverse: this.value}});
                    }
                }, {
                    text: 'y inverse:',
                    type: 'select',
                    values: [false, true],
                    onchange: function () {
                        chart.setOption({yAxis: {inverse: this.value}});
                    }
                }, {
                    text: 'axisLabel.hideOverlap:',
                    type: 'select',
                    values: [false, true],
                    onchange: function () {
                        var value = this.value;
                        chart.setOption({
                            xAxis: {axisLabel: {hideOverlap: value}},
                            yAxis: {axisLabel: {hideOverlap: value}},
                        });
                    }
                }, {
                    type: 'br'
                }, {
                    text: 'xAxis.axisLabel.rotate',
                    type: 'select',
                    options: [
                        {value: undefined},
                        {text: 'range', input: {
                            type: 'range',
                            noDeltaButtons: true,
                            value: 0,
                            min: -100,
                            max: 100,
                        }}
                    ],
                    onchange: function () {
                        chart.setOption({xAxis: {axisLabel: {rotate: this.value}}});
                    }
                }, {
                    text: 'yAxis.axisLabel.rotate',
                    type: 'select',
                    options: [
                        {value: undefined},
                        {text: 'range', input: {
                            type: 'range',
                            noDeltaButtons: true,
                            value: 0,
                            min: -100,
                            max: 100,
                        }}
                    ],
                    onchange: function () {
                        chart.setOption({yAxis: {axisLabel: {rotate: this.value}}});
                    }
                }, {
                    type: 'br'
                }, {
                    text: 'containLabel:',
                    type: 'select',
                    options: [
                        {text: 'false', value: false},
                        {text: 'true(should in green rect)', value: true}
                    ],
                    onchange: function () {
                        if (!chart.__containLabelRect) {
                            chart.__containLabelRect = new echarts.graphic.Rect({
                                style: {
                                    fill: 'green',
                                    opacity: 0.1,
                                },
                                z: -10000,
                            });
                            chart.getZr().add(chart.__containLabelRect);
                        }
                        updateContainLabelCriterion(chart);

                        chart.__containLabelRect.ignore = !this.value;

                        chart.setOption({
                            grid: {containLabel: this.value},
                        });
                    }
                }, {
                    type: 'select',
                    text: 'label margin:',
                    values: [undefined, 30, [2, 20]],
                    onchange: function () {
                        chart.setOption({
                            xAxis: {axisLabel: {textMargin: this.value}},
                            yAxis: {axisLabel: {textMargin: this.value}},
                        });
                    }
                }]
            });

            function updateContainLabelCriterion(chart) {
                if (chart.__containLabelRect) {
                    var width = chart.getWidth();
                    var height = chart.getHeight();
                    chart.__containLabelRect.setShape({
                        x: GRID_SIZE.left,
                        width: width - GRID_SIZE.left - GRID_SIZE.right,
                        y: GRID_SIZE.top,
                        height: height - GRID_SIZE.top - GRID_SIZE.bottom,
                    });
                }
            }

            if (chart) {
                chart.on('resize', function () {
                    updateContainLabelCriterion(chart);
                });
                chart.on('axisbreakchanged', function (params) {
                    console.log('axisbreakchanged', params);
                });
            }
        });
        </script>






        <script>
        require([
            'echarts'
        ], function (echarts) {

            var _gridShow = [true, true];
            // var _gridShow = [true, false];

            var BASE_DATE = 1740824305347;
            var ROUND_LEVELS = ['year', 'month', 'day', 'hour', 'minute', 'second', 'millisecond'];
            var X_LABEL_ROTATE = 30;
            var Y_LABEL_ROTATE = 0;
            var XAXIS_NAME_GAP = -130;
            var useUTC = false;

            var _curr = {
                roundLevel: {
                    breakStart: 'millisecond',
                    breakEnd: 'second',
                },
                timeDataRange: 'hour',
            };

            function xMakeBreaksAndData() {
                if (ROUND_LEVELS.indexOf(_curr.roundLevel.breakStart) < 0
                    || ROUND_LEVELS.indexOf(_curr.roundLevel.breakEnd) < 0
                ) {
                    throw new Error();
                }
                var timeDataRange = _curr.timeDataRange;

                function roundTimeStart(val) {
                    return echarts.time.roundTime(new Date(val), _curr.roundLevel.breakStart, useUTC).getTime();
                }
                function roundTimeEnd(val) {
                    return echarts.time.roundTime(new Date(val), _curr.roundLevel.breakEnd, useUTC).getTime();
                }
                function make(brkEndStartSpan) {
                    var start0seed = 35801123 + BASE_DATE;
                    var breaks = [];
                    breaks[0] = {
                        start: roundTimeStart(start0seed),
                        end: roundTimeEnd(start0seed + brkEndStartSpan),
                        gap: brkEndStartSpan / 8,
                    };
                    var brk1StartSeed = start0seed + 5.6 * brkEndStartSpan;
                    breaks[1] = {
                        start: roundTimeStart(brk1StartSeed),
                        end: roundTimeEnd(brk1StartSeed + 50 * brkEndStartSpan),
                        gap: '5%'
                    };
                    var brkMin = Math.min(breaks[0].start, breaks[1].start);
                    var brkMax = Math.max(breaks[0].end, breaks[1].end);
                    var seriesData = [[
                        [brkMin - brkEndStartSpan * 5, 1000],
                        [(brkMin + brkMax) / 2, 1500],
                        [brkMax + brkEndStartSpan * 10, 2000]
                    ], [
                        [breaks[0].start, 1000],
                        [breaks[0].end, 1500],
                        [breaks[1].start, 1000],
                        [breaks[1].end, 1500]
                    ], [
                        [brkMin - brkEndStartSpan * 55, 1000],
                        [brkMax + brkEndStartSpan * 55, 2000]
                    ]];
                    return {breaks: breaks, seriesData: seriesData};
                }

                if (timeDataRange === 'ms') {
                    return make(84080);
                }
                if (timeDataRange === 'second') {
                    return make(8408000);
                }
                else if (timeDataRange === 'hour') {
                    return make(4765432);
                }
                else if (timeDataRange === 'day') {
                    return make(98408123);
                }
                else if (timeDataRange === 'month') {
                    return make(3196800000);
                }
                else if (timeDataRange === 'year') {
                    return make(32140800000);
                }
                else {
                    throw new Error('illegal range');
                }
            }

            function yMakeBreaks() {
                return [{
                    end: 1800,
                    start: 1500,
                    gap: 0
                }, {
                    end: 900,
                    start: 600,
                    gap: '5%'
                }];
            }

            var FORMATTER_ONE_LINE = (value, idx, params) => {
                var dateStr = echarts.time.format(value, '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss}');
                if (params && params.break) {
                    return `${dateStr} (${params.break.type})`;
                }
                return `${dateStr}`;
            };
            var FORMATTER_TWO_LINE = (value, idx, params) => {
                var dateStr = echarts.time.format(value, '{yyyy}-{MM}-{dd}\n{hh}:{mm}:{ss}');
                if (params && params.break) {
                    return `(${params.break.type}) ${dateStr}`;
                }
                return `${dateStr}`;
            };

            var generatedData = xMakeBreaksAndData();
            var option = {
                yAxis: (function () {
                    var list = [];
                    var idx = 0;
                    var gridIndex = 0;
                    _gridShow[idx++] && list.push({
                        id: 'y_number_breaks',
                        gridIndex: gridIndex++,
                        axisLabel: {
                            rotate: Y_LABEL_ROTATE,
                        },
                        breaks: yMakeBreaks()
                    });
                    _gridShow[idx++] && list.push({
                        gridIndex: gridIndex++,
                        axisLabel: {
                            rotate: Y_LABEL_ROTATE,
                        },
                    });
                    return list;
                })(),
                xAxis: (function () {
                    var list = [];
                    var idx = 0;
                    var gridIndex = 0;
                    _gridShow[idx++] && list.push({
                        id: 'x_time_breaks',
                        type: 'time',
                        gridIndex: gridIndex++,
                        name: 'Has axisLabel.formatter',
                        nameLocation: 'center',
                        nameGap: XAXIS_NAME_GAP,
                        splitLine: {
                            show: true,
                        },
                        axisTick: {
                            show: true,
                        },
                        breaks: generatedData.breaks,
                        breakArea: {
                            zigzagAmplitude: 2,
                            itemStyle: {
                                borderType: 'solid',
                                color: '#ccc',
                            }
                        },
                        axisLabel: {
                            rotate: X_LABEL_ROTATE,
                            hideOverlap: false,
                        },
                    });
                    _gridShow[idx++] && list.push({
                        id: 'x_criterion',
                        type: 'time',
                        gridIndex: gridIndex++,
                        name: 'No breaks (criterion)',
                        nameLocation: 'center',
                        nameGap: XAXIS_NAME_GAP,
                        splitLine: {
                            show: true,
                        },
                        axisTick: {
                            show: true,
                        },
                        axisLabel: {
                            rotate: X_LABEL_ROTATE,
                            hideOverlap: false,
                        }
                    });
                    return list;
                })(),
                dataZoom: (function () {
                    var indexList = [];
                    var idx = 0;
                    _gridShow.forEach(function (show) { indexList.push(idx++); });
                    return [{
                        type: 'slider',
                        xAxisIndex: indexList.slice(),
                    }, {
                        type: 'slider',
                        right: 20,
                        yAxisIndex: indexList.slice(),
                    }, {
                        type: 'inside',
                        xAxisIndex: indexList.slice(),
                    }];
                })(),
                legend: {
                    left: 20,
                    selected: {
                        's2': false,
                    },
                },
                grid: (function () {
                    var list = [];
                    var idx = 0;
                    _gridShow[idx++] && list.push({
                        left: 90,
                        top: 50,
                        right: 70,
                        height: '20%',
                        borderWidth: 0,
                    });
                    _gridShow[idx++] && list.push({
                        left: 90,
                        right: 70,
                        height: '20%',
                        bottom: 120,
                        borderWidth: 0,
                    });
                    return list;
                })(),
                tooltip: {
                    trigger: 'axis',
                },
                series: (function makeSeries() {
                    const createSeries = () => generatedData.seriesData.map((data, idx) => ({
                        type: 'scatter',
                        name: 's' + idx,
                        data: data,
                        label: {
                            show: true
                        }
                    }));
                    let list = [];
                    var gridIndex = 0;
                    _gridShow.forEach((show) => {
                        if (!show) { return; }
                        var seriesOptionList = generatedData.seriesData.map((data, idx) => ({
                            type: 'scatter',
                            name: 's' + idx,
                            data: data,
                            xAxisIndex: gridIndex,
                            yAxisIndex: gridIndex,
                            label: {
                                show: true
                            }
                        }));
                        gridIndex++;
                        list = list.concat(seriesOptionList);
                    });
                    return list;
                })()
            };

            var chart = testHelper.create(echarts, 'main_xTime_yNumber_axis', {
                title: [
                    'x: time axis, y: number axis.',
                    '- The default formatter should:',
                    '   - be consistent between break and normal labels.',
                    '   - **have adequate time info**(change time level by select & zoom).',
                    '- Should not overlap as much as possible.',
                    '   - **rotate axis labels**, check break ends label overlap adjusting.',
                    '   - test **axisLable.rotate is 0**.',
                    '- **inverse axis** should be correct.'
                ],
                option: option,
                width: 700,
                height: 450,
                draggable: true,
                buttons: function (chart) {
                    var charOption = chart.getOption();

                    function updateDataAndXBreaks() {
                        var generatedData = xMakeBreaksAndData();
                        chart.setOption({
                            xAxis: {
                                id: 'x_time_breaks',
                                breaks: generatedData.breaks,
                            },
                            series: _gridShow.reduce((list, show) => {
                                if (show) {
                                    list = list.concat(generatedData.seriesData.map(data => ({data: data})));
                                }
                                return list;
                            }, [])
                        });
                    }

                    return [{
                        text: 'reset breaks expand',
                        onclick: function () {
                            chart.dispatchAction({
                                type: 'collapseAxisBreak',
                                batch: [{
                                    xAxisId: 'x_time_breaks',
                                    breaks: xMakeBreaksAndData().breaks,
                                }, {
                                    yAxisId: 'y_number_breaks',
                                    breaks: yMakeBreaks()
                                }],
                            });
                        }
                    }, {
                        text: 'axis.inverse:',
                        type: 'select',
                        values: [false, true],
                        onchange: function () {
                            var value = this.value;
                            var xAxis = [];
                            var yAxis = [];
                            _gridShow.forEach(show => {
                                if (show) {
                                    xAxis.push({ inverse: value });
                                    yAxis.push({ inverse: value });
                                }
                            });
                            chart.setOption({
                                xAxis: xAxis,
                                yAxis: yAxis,
                            });
                        }
                    }, {
                        text: 'axis formatter:',
                        type: 'select',
                        options: [
                            {text: 'none', value: undefined},
                            {text: 'one line', value: FORMATTER_ONE_LINE},
                            {text: 'two line', value: FORMATTER_TWO_LINE}
                        ],
                        onchange: function () {
                            chart.setOption({
                                xAxis: [
                                    { id: 'x_time_breaks', axisLabel: {formatter: this.value} },
                                ]
                            });
                        }
                    }, {
                        type: 'br'
                    }, {
                        type: 'select',
                        text: 'time range:',
                        values: ['ms', 'second', 'hour', 'day', 'month', 'year'],
                        value: _curr.timeDataRange,
                        onchange: function () {
                            _curr.timeDataRange = this.value;
                            updateDataAndXBreaks();
                        }
                    }, {
                        type: 'select',
                        text: 'break.start rounded to:',
                        values: ROUND_LEVELS,
                        value: _curr.roundLevel.breakStart,
                        onchange: function () {
                            _curr.roundLevel.breakStart = this.value;
                            updateDataAndXBreaks();
                        }
                    }, {
                        type: 'select',
                        text: 'break.end rounded to:',
                        values: ROUND_LEVELS,
                        value: _curr.roundLevel.breakEnd,
                        onchange: function () {
                            _curr.roundLevel.breakEnd = this.value;
                            updateDataAndXBreaks();
                        }
                    }, {
                        type: 'br'
                    }, {
                        text: 'hideOverlap:',
                        type: 'select',
                        values: [false, true],
                        onchange: function () {
                            var value = this.value;
                            var list = [];
                            _gridShow.forEach(show => {
                                show && list.push({ axisLabel: {hideOverlap: value} });
                            });
                            chart.setOption({
                                xAxis: list
                            });
                        }
                    }, {
                        text: 'showMinLabel',
                        type: 'select',
                        values: [undefined, false, true],
                        onchange: function () {
                            var value = this.value;
                            var list = [];
                            _gridShow.forEach(show => {
                                show && list.push({ axisLabel: {showMinLabel: value} });
                            });
                            chart.setOption({
                                xAxis: list
                            });
                        }
                    }, {
                        text: 'showMaxLabel',
                        type: 'select',
                        values: [undefined, false, true],
                        onchange: function () {
                            var value = this.value;
                            var list = [];
                            _gridShow.forEach(show => {
                                show && list.push({ axisLabel: {showMaxLabel: value} });
                            });
                            chart.setOption({
                                xAxis: list
                            });
                        }
                    }, {
                        type: 'br'
                    }, {
                        type: 'range',
                        noDeltaButtons: true,
                        text: 'xAxisLable.rotate',
                        value: X_LABEL_ROTATE,
                        min: -50,
                        max: 100,
                        oninput: function () {
                            var value = this.value;
                            var list = [];
                            _gridShow.forEach(show => {
                                show && list.push({ axisLabel: {rotate: value} });
                            });
                            chart.setOption({
                                xAxis: list
                            });
                        }
                    }, {
                        type: 'range',
                        noDeltaButtons: true,
                        text: 'yAxisLable.rotate',
                        value: Y_LABEL_ROTATE,
                        min: -50,
                        max: 100,
                        oninput: function () {
                            var value = this.value;
                            var list = [];
                            _gridShow.forEach(show => {
                                show && list.push({ axisLabel: {rotate: value} });
                            });
                            chart.setOption({
                                yAxis: list
                            });
                        }
                    }];
                }
            });
        });
        </script>







        <script>
        require([
            'echarts'
        ], function (echarts) {

            function makeBreaks() {
                return [{
                    end: 23000,
                    start: 5000,
                    gap: 200
                }, {
                    end: -800,
                    start: -15000,
                    gap: 2000
                }, {
                    end: 3420,
                    start: 3580,
                    gap: 0
                }];
            }

            var option = {
                tooltip: {
                },
                xAxis: [{
                    data: ['p1', 'p2'],
                    gridIndex: 0,
                    name: '(A) No axisLabel.formatter',
                    nameLocation: 'center',
                    nameGap: 25,
                }, {
                    data: ['p1', 'p2'],
                    gridIndex: 1,
                    name: '(B) Has axisLabel.formatter',
                    nameLocation: 'center',
                    nameGap: 25,
                }, {
                    data: ['p1', 'p2'],
                    gridIndex: 2,
                    name: '(C) No breaks (criterion)',
                    nameLocation: 'center',
                    nameGap: 25,
                }],
                yAxis: [{
                    gridIndex: 0,
                    breaks: makeBreaks(),
                    breakArea: {
                        zigzagAmplitude: 2,
                        itemStyle: {
                            color: '#ccc',
                        }
                    }
                }, {
                    gridIndex: 1,
                    breaks: makeBreaks(),
                    breakArea: {
                        zigzagAmplitude: 2,
                        itemStyle: {
                            borderType: 'solid',
                            color: '#ccc',
                        }
                    },
                    axisLabel: {
                        formatter: (value, idx, params) => {
                            if (params && params.break) {
                                return `${value} (${params.break.type})`;
                            }
                            return `${value}`;
                        }
                    }
                }, {
                    gridIndex: 2,
                }],
                legend: {
                    data: ['s2', 's3', 's4'],
                    selected: {
                        // 's2': false,
                        's4': false,
                    },
                },
                grid: [{
                    top: 50,
                    left: 50,
                    right: '73%',
                    borderWidth: 0,
                }, {
                    top: 50,
                    left: '40%',
                    right: '35%',
                    borderWidth: 0,
                }, {
                    top: 50,
                    left: '75%',
                    right: 20,
                    borderWidth: 0,
                }],
                tooltip: {
                    trigger: 'axis'
                },
                series: (function makeSeries() {
                    const createSeries = () => [{
                        type: 'bar',
                        name: 's2',
                        data: [-8000, 10000],
                        label: {
                            show: true
                        }
                    }, {
                        type: 'bar',
                        name: 's3',
                        data: [200, 500],
                        label: {
                            show: true
                        }
                    }, {
                        type: 'bar',
                        name: 's4',
                        data: [-18910, 31230],
                        label: {
                            show: true
                        }
                    }];
                    const seriesOptionList = [];
                    for (axisIndex = 0; axisIndex < 3; axisIndex++) {
                        createSeries().forEach(seriesOption => {
                            seriesOption.xAxisIndex = axisIndex;
                            seriesOption.yAxisIndex = axisIndex;
                            seriesOptionList.push(seriesOption);
                        });
                    }
                    return seriesOptionList;
                })()
            };

            var chart = testHelper.create(echarts, 'main_xCategory_yNumber_axis', {
                title: [
                    'x: category axis, y: number axis.',
                    '- The default formatter should be correct and consistent.',
                    '- Should not overlap.',
                    '- If a break is displayed, all ends of it should be displayed.',
                ],
                option: option,
                height: 300,
                buttons: function (chart) {
                    var option = chart.getOption();
                    return [{
                        text: 'hideOverlap:',
                        type: 'select',
                        values: [true, false],
                        value: !!(option.yAxis[0].axisLabel || {}).hideOverlap,
                        onchange: function () {
                            var value = this.value;
                            chart.setOption({
                                yAxis: [{
                                    axisLabel: {hideOverlap: value}
                                }, {
                                    axisLabel: {hideOverlap: value}
                                }, {
                                    axisLabel: {hideOverlap: value}
                                }]
                            });
                        }
                    }, {
                        type: 'range',
                        noDeltaButtons: true,
                        text: 'yAxisLable.rotate',
                        value: 0,
                        min: -50,
                        max: 100,
                        oninput: function () {
                            var value = this.value;
                            chart.setOption({
                                yAxis: [
                                    { axisLabel: {rotate: value} },
                                    { axisLabel: {rotate: value} },
                                    { axisLabel: {rotate: value} },
                                ]
                            });
                        }
                    }]
                }
            });
        });
        </script>



        <script>
        require([
            'echarts'
        ], function (echarts) {

            var X_NAME_GAP = -240;

            function makeBreaks() {
                return [{
                    end: 230000,
                    start: 50000,
                    gap: 5000
                }, {
                    end: -8000,
                    start: -150000,
                    gap: 20000
                }, {
                    end: 34200,
                    start: 35800,
                    gap: 0
                }];
            }

            var option = {
                tooltip: {
                },
                yAxis: [{
                    data: ['p1', 'p2'],
                    gridIndex: 0,
                }, {
                    data: ['p1', 'p2'],
                    gridIndex: 1,
                }, {
                    data: ['p1', 'p2'],
                    gridIndex: 2,
                }],
                xAxis: [{
                    id: 'x0',
                    gridIndex: 0,
                    name: '(A) No axisLabel.formatter',
                    nameLocation: 'center',
                    nameGap: X_NAME_GAP,
                    breaks: makeBreaks(),
                    breakArea: {
                        zigzagAmplitude: 2,
                        itemStyle: {
                            color: '#ccc',
                        }
                    },
                    axisLabel: {
                        hideOverlap: true,
                    }
                }, {
                    id: 'x1',
                    gridIndex: 1,
                    name: '(B) Has axisLabel.formatter',
                    nameLocation: 'center',
                    nameGap: X_NAME_GAP,
                    breaks: makeBreaks(),
                    breakArea: {
                        zigzagAmplitude: 2,
                        itemStyle: {
                            borderType: 'solid',
                            color: '#ccc',
                        }
                    },
                    axisLabel: {
                        hideOverlap: true,
                        formatter: (value, idx, params) => {
                            if (params && params.break) {
                                return `${value}\n(${params.break.type})`;
                            }
                            return `${value}`;
                        }
                    }
                }, {
                    id: 'x2',
                    gridIndex: 2,
                    name: '(C) No breaks (criterion)',
                    nameLocation: 'center',
                    nameGap: X_NAME_GAP,
                    axisLabel: {
                        hideOverlap: true,
                    }
                }],
                legend: {
                    data: ['s2', 's3', 's4'],
                    selected: {
                        // 's2': false,
                        's4': false,
                    },
                },
                grid: [{
                    top: 50,
                    left: 50,
                    width: '35%',
                    height: '35%',
                    borderWidth: 0,
                }, {
                    top: 50,
                    right: 70,
                    width: '35%',
                    height: '35%',
                    borderWidth: 0,
                }, {
                    left: 50,
                    right: 20,
                    width: '35%',
                    height: '35%',
                    bottom: 60,
                    borderWidth: 0,
                }],
                tooltip: {
                    trigger: 'axis'
                },
                series: (function makeSeries() {
                    const createSeries = () => [{
                        type: 'bar',
                        name: 's2',
                        data: [-80000, 100000],
                        label: {
                            show: true
                        }
                    }, {
                        type: 'bar',
                        name: 's3',
                        data: [2000, 5000],
                        label: {
                            show: true
                        }
                    }, {
                        type: 'bar',
                        name: 's4',
                        data: [-189100, 312300],
                        label: {
                            show: true
                        }
                    }];
                    const seriesOptionList = [];
                    for (axisIndex = 0; axisIndex < 3; axisIndex++) {
                        createSeries().forEach(seriesOption => {
                            seriesOption.xAxisIndex = axisIndex;
                            seriesOption.yAxisIndex = axisIndex;
                            seriesOptionList.push(seriesOption);
                        });
                    }
                    return seriesOptionList;
                })()
            };

            var chart = testHelper.create(echarts, 'main_xNumber_yCategory_axis', {
                title: [
                    'x: number axis, y: category axis',
                    '- xAxis should be horizontal.',
                    '- The default formatter should be correct and consistent.',
                    '- Should not overlap.',
                    '- some break ends can be hide since hideOverlap: true.',
                ],
                option: option,
                height: 600,
                buttons: function (chart) {
                    var option = chart.getOption();
                    return [{
                        text: 'hideOverlap:',
                        type: 'select',
                        value: !!(option.xAxis[0].axisLabel || {}).hideOverlap,
                        values: [false, true],
                        onchange: function () {
                            var value = this.value;
                            chart.setOption({
                                xAxis: [{
                                    id: 'x0',
                                    axisLabel: {hideOverlap: value}
                                }, {
                                    id: 'x1',
                                    axisLabel: {hideOverlap: value}
                                }, {
                                    id: 'x2',
                                    axisLabel: {hideOverlap: value}
                                }]
                            });
                        }
                    }, {
                        type: 'range',
                        noDeltaButtons: true,
                        text: 'xAxisLable.rotate',
                        value: 0,
                        min: -50,
                        max: 100,
                        oninput: function () {
                            var value = this.value;
                            var list = [];
                            [1, 1, 1].forEach(_ => {
                                list.push({ axisLabel: {rotate: value} });
                            });
                            chart.setOption({
                                xAxis: list
                            });
                        }
                    }];
                }
            });
        });
        </script>




    </body>

</html>

